 <template>
  <div class="Label">
    <el-button size="mini" :class="{active:$route.path==='/meter'}">到首页</el-button>
    <el-button size="mini" @click="jump(nav.path,nav.names)" :class="{active:$route.path===nav.path}" v-for="(nav,index) in $store.state.expand.tabs" :key="nav.path">
{{nav.label}}
      <li class="el-icon-delete" @click.stop="Deltab(index)"></li>
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'Label.vue',
  methods:{
    Deltab(index){
      this.$store.commit('MINUS_TABS',index)
      //返回上一次的路由
      const tabs =this.$store.state.expand.tabs
      //判断删除后返回首页
      if(tabs.length===0){
        this.$router.push('/meter')
      }
      //删除条上一层
      this.$router.push(tabs[tabs.length-1])
    },
    jump(path,names){
    this.$router.push(path)
      //头部联动
      this.$store.commit('NAVIGATION',names)
    },
  }
}
</script>

<style lang="scss" scoped>
.Label {
  height: 32px;
  background: #ffffff;
  border-top: 2px solid #e6e7e9;
  border-bottom: 2px solid #e6e7e9;

  button {
    margin-top: 2px;
    margin-left: 10px;

    &.active {
      background-color: #42b983;
      color: #f1f5fb;
    }
  }

}

</style>
